/**
 * 添加事件移入变色，移出变回原来的效果
 */
var trs = document.getElementsByTagName("tr"); //获取所有的行
// 隔行换色
// for(var i in trs){
// 	if(i%2==0){
// 		trs[i].style.backgroundColor="gray";
// 	}
// }
for (var i in trs) {
	trs[i].onmouseover = function() {
		this.style.backgroundColor = "grey";
	}
	trs[i].onmouseout = function() {
		this.style.backgroundColor = "";
	}
}
/**
 * 删除功能
 */
var dels = document.getElementsByClassName("del");
for (var i in dels) {
	dels[i].onclick = function() {
		if (confirm("是否确认删除")) {
			//alert(this.parentNode.children[1].innerText);
			this.parentNode.parentElement.removeChild(this.parentNode);
		}
	}
}
/**
 * 全选 全不选功能
 */
var checkAll = document.getElementById("checkAll");
var checks = document.getElementsByClassName("check");
checkAll.onclick = function() {
	if (checkAll.checked == true) {
		for (var i in checks) {
			checks[i].checked = true;
		}

	} else {
		for (var i in checks) {
			checks[i].checked = false;
		}
	}
}

/**
 * 批量删除
 */
var delAll = document.getElementById("delAll");
delAll.onclick = function() {
	var isDel = false;
	if (confirm("是否确认批量删除？")) {
		for (var i = 0; i < checks.length; i++) {
			if (checks[i].checked == true) {
				isDel = true;
				checks[i].parentNode.parentNode.parentElement.removeChild(checks[i].parentNode.parentNode);
				i--;
			}
		}
	}
}
/**
 * 增加功能
 */
var adds = document.getElementsByClassName("add"); //三个input表单获取
var add_bth = document.getElementById("add_bth"); //增加按钮获取
//节哥这里的td1移动到这
var td1 = document.createElement("td");
add_bth.onclick = function() { //给增加按钮绑定事件
	// 将获取的三个表单信息存入一个arrVaule数组
	var arrVaule = new Array();
	for (var i = 0; i < adds.length; i++) {
		arrVaule[i] = adds[i].value;
	}
	var tr = createTr(arrVaule); //创建一行将数组中的值存入
	var tbody = document.getElementsByTagName("tbody")[0];
	tbody.appendChild(tr);

	var pro = document.getElementById("provice");
	var city1 = document.getElementById("city");
    //节哥动的是这里！！！！！！！！！！！！！！！！！下面加了三行
	var proOptions=pro.options;
	var cityOptions=city1.options;
	td1.innerText =proOptions[pro.selectedIndex].text+cityOptions[city1.selectedIndex].text;
}
var createTr = function(arr) {
	var tr = document.createElement("tr");
	/**
	 * 动态创建
	 * <td><input type="checkbox" class="check"></td>
	 */
	tr.innerHTML = "<td><input type='checkbox' class='check'></td>";
	for (var i = 0; i < arr.length; i++) {
		var text = document.createTextNode(arr[i]);
		var td = document.createElement("td");
		td.appendChild(text);

		tr.appendChild(td);
	}
	/**
	 * <td class="del"><button>删除</button></td>
	 */
	
	tr.appendChild(td1);
	var text = document.createTextNode("删除");
	var btn = document.createElement("button");
	btn.appendChild(text);

	var td = document.createElement("td");
	var att = document.createAttribute("class");
	att.value = "del";
	td.setAttributeNode(att);
	td.appendChild(btn);

	td.onclick = function() {
		if (confirm("确认删除吗?")) {
			//拿到第一行的ID,我们需要根据id去后台把数据真正的删除
			alert(this.parentNode.children[1].innerText);
			this.parentNode.parentElement.removeChild(this.parentNode);

		}
	}
	tr.appendChild(td);
	return tr;
}
var provices = [{
	id: 1,
	name: "安徽省"
}, {
	id: 2,
	name: "江苏省"
}, {
	id: 3,
	name: "浙江省"
}];

var city_1 = [{
	id: 11,
	name: "合肥市"
}, {
	id: 12,
	name: "马鞍山市"
}, {
	id: 13,
	name: "芜湖市"
}];
var city_2 = [{
	id: 21,
	name: "南京市"
}, {
	id: 22,
	name: "苏州市"
}, {
	id: 23,
	name: "无锡市"
}];
var city_3 = [{
	id: 31,
	name: "杭州市"
}, {
	id: 32,
	name: "宁波市"
}, {
	id: 33,
	name: "湖州市"
}];

var citys = [city_1, city_2, city_3];
/**
 * 给省级下拉框赋值
 */
var proviceSelect = document.getElementById("provice");
proviceSelect.innerHTML = "<option>--请选择--</option>";
/**
 * js对表单的支持
 */
for (var i in provices) {
	var option = new Option();
	option.text = provices[i].name;
	option.value = provices[i].id;
	proviceSelect.appendChild(option);
}
/**
 * 修改市级下拉
 */
var city = document.getElementById("city");
proviceSelect.onchange = function() {
	city.innerHTML = ""; //每次触发该方法，清空下拉框
	var indexOfCitys = parseInt(proviceSelect.value);
	for (var i in citys[indexOfCitys - 1]) {
		var option = new Option(); //<option></option>
		option.text = citys[indexOfCitys - 1][i].name;
		option.value = citys[indexOfCitys - 1][i].id;
		city.appendChild(option);
	}
}
